<template>
  <el-card shadow="never" style="margin-top: 8px" body-style="padding: 0">
    <template #header>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item of tabList"
          :key="item.id"
          :label="item.name"
          :name="item.id"
        ></el-tab-pane>
      </el-tabs>
    </template>

    <JsonPage :layoutConfig="layoutConfig"></JsonPage>
  </el-card>
</template>

<script>
import JsonPage from '@/components/JsonPage'

import localDict from './local-dict.js'
import config from './config'

export default {
  name: 'OperationMaintainContent',
  components: {
    JsonPage
  },
  data () {
    return {
      activeName: 'env'
    }
  },
  computed: {
    tabList () {
      return Object.values(localDict['设备规格'])
    },
    layoutConfig () {
      return config[this.activeName]
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-card__header {
  padding: 0 16px;
  border-bottom: 0 none;
}

::v-deep .el-tabs__header {
  margin-bottom: 0;
}
</style>
